<template>
    <div class="box">
        <navv title="分类"></navv>
        <template v-if="list.length > 0">
            <van-row class="main">
                <van-col span="6" style="height: 100%;overflow: auto;">
                    <van-sidebar v-model="active">
                        <van-sidebar-item :title="v.cat_name" v-for="(v, i) in list" :key="i" />
                    </van-sidebar>
                </van-col>

                <van-col span="17" style="height: 100%;overflow: auto;">
                    <van-pull-refresh v-model="loading" @refresh="onRefresh">
                        <van-search v-model="send" placeholder="请输入搜索关键词" />
                        <div v-for="(v, i) in list[active]?.children">
                            {{ v.cat_name }}
                            <van-grid :border="false" :column-num="3">
                                <van-grid-item v-for="(val, index) in v.children" :key="index">
                                    <van-image :src="val.cat_icon" />
                                    <p>{{ val.cat_name }}</p>
                                </van-grid-item>
                            </van-grid>
                        </div>
                    </van-pull-refresh>

                </van-col>

            </van-row>
        </template>
        <template v-else>
            <van-empty description="暂无数据" />
        </template>




        <van-submit-bar :price="3050" button-text="去结算" @submit="onSubmit">
            <van-checkbox v-model="checked">全选</van-checkbox>
        </van-submit-bar>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import navv from '@/components/navv.vue';

const active = ref(0);
import { categoriesApi } from '@/api/api';

let list = ref("")
const getlist = () => {
    categoriesApi().then(res => {
        list.value = res.data.message
    })
}
getlist()

import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()

import _ from 'lodash'
let send = ref('')
watch(send, _.debounce((newValue, oldValue) => {
    console.log(111);

}, 1000))

import { showToast } from 'vant';
const loading = ref(false);
const onRefresh = () => {
    setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;
        getlist()
    }, 1000);
};
</script>

<style lang="scss" scoped>
.box {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .main {
        flex: 1;
        display: flex;
        overflow: hidden;
    }
    .van-submit-bar{
        bottom: 5rem;
    }
}
</style>